<template>
    <div class="list" :class="[index == active ? 'list-border' : '']" v-for="(item, index) in mathData.List" :key="index">
        <div @click="toggleHandler(index)">
            <span class="title">{{ item.title }}</span>
            <span class="icon iconfont icon-top" :class="[index == active ? 'rotate' : '']"></span>
        </div>
        <div class="list-item" :class="[index == active ? '' : 'list-item-height']">
            <div class="toast" v-if="item.type<=0">即将上线，敬请期待...</div>
            <div class="chapter" @click="gotoVideoHandler(childItem.id)" v-for="(childItem, childIndex) in item.type"
                :key="childIndex">
                <div><span :style="{ 'background': childItem.colors }">{{ childItem.nums }}</span>{{ childItem.title }}
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>

import { ref, reactive, onMounted } from "vue"
import { useRouter,useRoute } from 'vue-router'
import api from "../api/index"


const { query } = useRoute()

const active = ref(0)
const router = useRouter()
const mathData = reactive({
    List: []
})

onMounted(() => {
    api.getMathCourse().then(res => {
        mathData.List = res.data
    })
})

/**
 * 存储用户信息
 */
onMounted(() =>{
    if(query.user){
        sessionStorage.setItem("user",query.user)
    }
})


function toggleHandler(index) {
    active.value = index
}

function gotoVideoHandler(id) {
    router.push({ name: "video", params: { id,type:"math" } })
}

</script>

<style scoped>
.list {
    background: #F6F7F8;
    margin: 15px;
    padding: 15px;
    border: 1px solid #DDD;
    border-radius: 5px;
}

.list:nth-child(4){
    margin-bottom: 70px;
}

.list-border {
    border: 1px solid #594059 !important;
}

.list .title {
    height: 40px;
    line-height: 40px;
    font-size: 20px;
    font-weight: bold;
    color: #333;
}

.list .icon {
    display: block;
    float: right;
    height: 40px;
    line-height: 40px;
    font-size: 20px;
    transition: all 0.1s;
}

.rotate {
    transform: rotate(180deg);
}

.list .list-item {
    transition: all 1s;
    overflow: hidden;
}

.list .list-item-height {
    height: 0;
}
.toast{
    color: #666;
}

.list .list-item .chapter {
    font-size: 15px;
    margin: 25px 0;
    color: #222;
    font-weight: 700;
}

.list .list-item .chapter span {
    padding: 5px 15px;
    border: 1px solid #333;
    border-top-right-radius: 15px;
    border-top-left-radius: 1px;
    border-bottom-left-radius: 1px;
    border-bottom-right-radius: 15px;
    margin-right: 10px;
}
</style>